Iguana – Toegankelijkheid & Bruikbaarheid
1 Introductie
1.1 Iguana en Aangepaste interfaces
Één van de hoofd doelen van Iguana is het leveren van “ideale”, “op maat gemaakte” interfaces. Dit kan van toepassing zijn op aangepaste interfaces voor een specifiek apparaat (voor een zogenaamde user-agent, bv. voor een mobiele telefoon), voor een specifiek gebruikerstype (bv. een kind, een volwassene) of een specifieke handicap (bv. hoog contrast interfaces, of interfaces voor blinde mensen).
Technisch wordt dit opgelost door het concept “site profielen” (bv. “kinderen”, “mobiel”), het ondersteunen van user-agent detectie en het concept thema's (bv. hoog contrast / slechtziende skins).
Een specifiek onderwerp op dit gebied is toegankelijkheid, het leveren van toegankelijke interfaces voor gebruikers met een visuele handicap. Dit document beschrijft in het kort de hoofdafwegingen voor de ontwikkeling van toegankelijke interfaces binnen Iguana.
Het is relevant op te merken dat we gelijke aandacht besteden aan het nauw verwante onderwerp bruikbaarheid. Terwijl toegankelijkheid zich primair concentreert op een set technische richtlijnen, concentreert het concept bruikbaarheid zich op het bieden van een globale “gemakkelijk te gebruiken” interface.
Let op
Infor levert een toegankelijke ‘basis', het is uw verantwoordelijkheid er voor te zorgen dat de website die u maakt met behulp van Iguana voldoet aan de toegankelijkheidseisen.
1.2 Technische benadering : WAI-ARIA
Iguana is een zogenaamd op widget technologie gebaseerd framework voor het creëren van dynamische interfaces (voor websites, mobiele interfaces, en anderen). Deze architectuur impliceert dat Iguana een zogenaamde "RIA" (Rich Internet Application) is, die zwaar vertrouwt op zogenaamde AJAX technologie (AJAX = Asynchronous JavaScript en XML). Het gebruik van AJAX en widget technologie die "dynamisch" inhoud ondersteunt brengt zijn eigen specifieke uitdagingen met betrekking tot toegankelijkheid met zich mee.
Iguana vertrouwt zwaar op een JavaScript framework genaamd dojo. Één van de hoofdredenen waarom dojo was geselecteerd als het JavaScript framework was zijn “native” ondersteuning voor WAI-ARIA.
“WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) is a draft technical specification published by the World Wide Web Consortium that specifies how to increase the accessibility of dynamic content and user interface components developed with Ajax, HTML, JavaScript and related technologies. Web developers increasingly use client-side scripts to create user interface controls that cannot be created with HTML alone. They also use client-side script to update sections of a page without requesting a completely new page from a web server. Such techniques on websites are called rich internet applications.” (from: http://en.wikipedia.org/wiki/WAI-ARIA, April 2011).
“WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies. Currently certain functionality used in Web sites is not available to some users with disabilities, especially people who rely on screen readers and people who cannot use a mouse. WAI-ARIA addresses these accessibility challenges, for example, by defining new ways for functionality to be provided to assistive technology. With WAI-ARIA, developers can make advanced Web applications accessible and usable to people with disabilities.
[…]
Web sites are increasingly using more advanced and complex user interface controls, such as tree controls for Web site navigation […]. To provide an accessible user experience to people with disabilities, assistive technologies need to be able to interact with these controls. However, the information that the assistive technologies need is not available with most current Web technologies.
Another example of an accessibility barrier is drag-and-drop functionality that is not available to users who use a keyboard only and cannot use a mouse. Even relatively simple Web sites can be difficult if they require an extensive amount of keystrokes to navigate with only a keyboard.
Many Web applications developed with Ajax (also known as AJAX), DHTML, and other technologies pose additional accessibility challenges. For example, if the content of a Web page changes in response to user actions or time- or event-based updates, that new content may not be available to some people, such as people who are blind or people with cognitive disabilities who use a screen reader.
WAI-ARIA addresses these accessibility challenges by defining how information about this functionality can be provided to assistive technology. With WAI-ARIA, an advanced Web application can be made accessible and usable to people with disabilities.
[…]
More specifically, WAI-ARIA provides a framework for adding attributes to identify features for user interaction, how they relate to each other, and their current state. WAI-ARIA describes new navigation techniques to mark regions and common Web structures as menus, primary content, secondary content, banner information, and other types of Web structures. For example, with WAI-ARIA, developers can identify regions of pages and enable keyboard users to easily move among regions, rather than having to press Tab many times.
WAI-ARIA also includes technologies to map controls, Ajax live regions, and events to accessibility application programming interfaces (APIs), including custom controls used for rich Internet applications. WAI-ARIA techniques apply to widgets such as buttons, drop-down lists, calendar functions, tree controls (for example, expandable menus), and others.
WAI-ARIA provides Web authors with the following:
-
Roles to describe the type of widget presented, such as "menu," "treeitem," "slider," and "progressmeter"
-
Roles to describe the structure of the Web page, such as headings, regions, and tables (grids)
-
Properties to describe the state widgets are in, such as "checked" for a check box, or "haspopup" for a menu.
-
Properties to define live regions of a page that are likely to get updates (such as stock quotes), as well as an interruption policy for those updates—for example, critical updates may be presented in an alert dialog box, and incidental updates occur within the page
-
Properties for drag-and-drop that describe drag sources and drop targets
-
A way to provide keyboard navigation for the Web objects and events, such as those mentioned above”
(uit http://www.w3.org/WAI/intro/aria.php, April 2011).
Verdere informatie over WAI-ARIA kan gevonden worden op http://www.w3.org/WAI/intro/aria.php. De volledige specificaties van de WAI-ARIA standaard kunnen gevonden worden op http://www.w3.org/TR/wai-aria/.
1.3 WAI-ARIA & dojo
Iguana vertrouwt zwaar op WAI-ARIA technologie. Iguana gebruikt het dojo JavaScript framework. dojo's ARIA wordt algemeen beschouwd als het meest volwassen van alle JavaScript frameworks.
Informatie over dojo en Web 2.0 Toegankelijkheid met WAI-ARIA FAQ kan gevonden worden op http://wiki.codetalks.org/wiki/index.php/Web_2.0_Accessibility_with_WAI-ARIA_FAQ,
“Under utilization of ARIA is being addressed by the developers of ARIA, who are working directly with open source JavaScript toolkits projects such as dojo. It often makes sense for the authors of these toolkits, which provide solutions to a number of problems, such as security and cross-browser scripting. Because of this, entire companies and industries are moving forward with applications that use toolkits like dojo. Authors that utilize toolkits like dojo with ARIA support can thus get accessibility for free.”
Auteurs willen zowel cross-browser compatibiliteit en vrije toegankelijkheid – door gemakkelijk te gebruiken, voorgebouwde widgets. Een aantal JavaScript toolkits ontwikkelen snel krachtige sets van widgets:
· dojo: ARIA ondersteuning is volwassen
· YUI: ARIA ondersteuning, groeit snel
· GWT: ARIA ondersteuning, groeit snel
· Jquery: ARIA ondersteuning is in de begin fase”
Meer informatie over dojo en zijn WAI-ARIA ondersteuning kan gevonden worden op:
· Dijit Toegankelijkheid (a11y): http://dojotoolkit.org/reference-guide/dijit/a11y/index.html
· Toegankelijke Widgets creëren : http://www.dojotoolkit.org/reference-guide/quickstart/writingWidgets/a11y.html
· Dijit Toegankelijkheid bronnen : http://dojotoolkit.org/reference-guide/dijit/a11y/resources
· Testen van Widgets op Toegankelijkheid : http://www.dojotoolkit.org/reference-guide/quickstart/writingWidgets/a11yTesting.html#id1
· Real World Web Toegankelijkheid met WAI-ARIA : http://ewh.ieee.org/conf/accessingthefuture/documents/gibson.pdf.
2 Toegankelijkheidskenmerken per profiel
Iguana levert een specifieke eigenschap per profiel, die Iguana´s gedrag lichtelijk verandert om de toegankelijkheid en bruikbaarheid voor visueel gehandicapte gebruikers, te verbeteren. De eigenschap Toegankelijkheidsmogelijkheden is per profiel gedefinieerd.
Indien Toegankelijkheidsmogelijkheden aangevinkt is, wordt het volgende gedrag geactiveerd:
· voor alle sjablonen gebruikt Iguana sjablonen die een extensie “vi” hebben, - d.w.z. als Iguana de profielen A, B, C, D en E gebruikt, wanneer de Toegankelijkheidsmogelijkheden eigenschap niet is aangevinkt, dan zal het de profielen Avi, Bvi, Cvi, Dvi en Evi gebruiken als de Toegankelijkheidsmogelijkheden eigenschap wel is aangevinkt.
· De standaard Iguana pop-up widgets worden getoond als “binnen pagina” i.p.v. als pop-ups (waarschuwings- en bevestigingsberichten worden echter getoond via de standaard browser vakjes, tenzij ze verschijnen gedurende een pop-up, in welk geval ze “binnen pagina” getoond zullen worden).
· De Iguana default dropdown lijsten (van dojo) worden vervangen door standaard HTML dropdown lijsten
· in Mijn Profiel, zijn de “Persoonlijke gegevens” en ‘Gekoppelde accounts” widgets als default uitgeklapt (i.p.v. ingeklapt)
· in Zoeken en Mijn Profiel, zijn sorteer dropdown lijsten verplaatst naar de hoofd widget (i.p.v. de opties widget) en is er een “hersorteren” button toegevoegd aan de dropdown lijst
· in Zoeken, op de resultaten set pagina, worden hyperlinks toegevoegd bovenaan de hoofd widget voor toegang tot de widgets in de zijkolom, die de Opties, Restricties Associaties, en gelijksoortige widgets bevat.
De toegankelijkheidskenmerken vereisen geen specifieke CSS en maken deel uit van het base.css.
3 Testen
Iguana's toegankelijkheidskenmerken zijn ontwikkeld en getest in samenwerking met Blindenbibliotheken, die een belangrijke rol hebben gespeeld in het testen van de toegankelijkheidskenmerken.
Testen is primair gedaan met JAWS (screen reader), ZoomText (vergroter) en NVDA (screen reader).
“JAWS (Job Access With Speech) is a computer screen reader program in Microsoft Windows that allows blind and visually impaired users to read the screen either with a text-to-speech output or by a Refreshable Braille display.” (from http://en.wikipedia.org/wiki/Job_Access_With_Speech, January 2012). JAWS is the most used screen reader program worldwide (see e.g. http://webaim.org/projects/screenreadersurvey2/ for some market share data).
“ZoomText Magnifier enlarges and enhances everything on your computer screen, making all of your applications easy to see and use.” (from http://www.aisquared.com/zoomtext, January 2012).
“NonVisual Desktop Access (NVDA) is a free and open source screen reader for the Microsoft Windows operating system. Providing feedback via synthetic speech and Braille, it enables blind or vision impaired people to access computers running Windows for no more cost than a sighted person. Major features include support for over 20 languages and the ability to run entirely from a USB drive with no installation.” (from http://www.nvda-project.org/, February 2012).
3.1 Minimum vereisten
De minimum vereisten voor deze applicaties zijn:
· JAWS 11 en later
· ZoomText 9 en later
· NVDA 2011.3.
4 Een hoog contrast thema
Iguana levert ook een thema genaamd “highcontrast”. Dit is een CSS bestand dat op elke Iguana site toegepast kan worden en dat primair geel en wit gebruikt op een zwarte achtergrond.
Het “highcontrast” thema is gebaseerd op “base.css” (het default thema), maar heeft zijn eigen set eigenschappen.
Dit hoog contrast thema kan op elke pagina aangeroepen worden door het toevoegen van de URL parameter ?theme=highcontrast aan de URL.
De volgende schermvoorbeelden tonen hetzelfde scherm, eerst met het default “orange” thema en dan met het “highcontrast” thema.
Het “oranje” thema
Dezelfde pagina met het “hoog contrast” thema
Zie het document over Structuur en Stijl voor meer informatie over CSS bestanden en hoe deze te gebruiken.
4.1 Karakteristieken van het ‘hoog contrast' thema
Het ‘highcontrast' thema heeft de volgende karakteristieken:
· zwarte achtergrond
· witte teksten
· links in het geel
· een geselecteerde link (focus/hover) heeft een rode rand
· een dikke blauwe rand bovenaan elke widget
· een dunne blauwe lijn direct onder de widget titel
· een dunne groene lijn tussen secties binnen dezelfde widget (bv. tussen records van een set resultaten of tussen persoonlijke gegevens en gekoppelde accounts in de Mijn Profiel omgeving)
· buttons hebben een gele rand en zwarte achtergrond
· meer ruimte tussen elementen
· moderator login geeft de pagina´s geen grijze achtergrond, maar er zal een dikke rode rand verschijnen boven en onder elke sectie.